<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/comm.css">
		<link rel="stylesheet" href="css/index.css">

	</head>
	<body>
		
		<!-- 头部 -->
		<div>
			<iframe src="header.html" class="my_header" scrolling="no"></iframe>
		</div>
		<!-- 网页主体 -->
		<div class="container">
			<!-- 焦点轮播图 -->
			<div id="demo"data-ride="carousel" class="carousel">
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="img/index/banner1.png" alt="">
					</div>
					<div class="carousel-item ">
						<img src="img/index/banner2.png" alt="">
					</div>
					<div class="carousel-item ">
						<img src="img/index/banner3.png" alt="">
					</div>
					<div class="carousel-item ">
						<img src="img/index/banner4.png" alt="">
					</div>
				</div>
				<!-- 轮播指示器 -->
				<ul class="carousel-indicators">
					<li data-target="#demo" data-slide-to="0" class="active"></li>
					<li data-target="#demo" data-slide-to="1"></li>
					<li data-target="#demo" data-slide-to="2"></li>
					<li data-target="#demo" data-slide-to="3"></li>
				</ul>
				<!-- 左右箭头 -->
				<a data-slide="next"class="carousel-control-next" href="#demo">
					<span class="carousel-control-next-icon"></span>
				</a>
				<a data-slide="prev"class="carousel-control-prev" href="#demo">
					<span class="carousel-control-prev-icon"></span>
				</a>
				
				
			</div>
			<!-- 主页内容 -->
			<div class="border-bottom py-2 mb-2">
				<img src="http://101.96.128.94:9999/img/index/computer_icon.png" alt="">
				<span class="h4 ml-3 font-weight-bold text-muted">首页推荐 /1F</span>
			</div>
			<div class="row no-gutters">
				<!-- 第一个 -->
				<div class="col-lg-7 col-sm-12">
					<div class="top-height mr-lg-1 mb-1 ">
						<div class="card w-50  pt-5 pl-5">
							<h3>Apple MacBook Air系列</h3>
							<p class="text_small text-muted">酷睿双核i1处理器|216GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存1
							</p>
							<p class="h5 text-primary">￥6988.00</p>
							<a href="" class="btn btn-primary rounded w-50">查看详情</a>
						</div>
						<img class="img1-float"src="img/index/study_computer_img1.png" alt="">
						
					</div>
				</div>
				<!-- 第二个 -->
				<div class="col-lg-5 col-sm-12">
					<div class="top-height mb-1 ">
						<div class="card w-65 pt-5 pl-5">
							<h3>小米Air  金属超轻薄</h3>
							<p class="text_small  text-muted">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡
							</p>
							<p class="h5 text-primary">￥3488.00</p>
							<a href="#" class="btn btn-primary rounded w-50">查看详情</a>
						</div>
						<img class="img2-float"src="http://101.96.128.94:9999/img/index/study_computer_img2.png" alt="">
					</div>
				</div>
				<!-- 第三个 -->
				<div class="col-lg-5 col-sm-12">
					<div class="bottom-height mr-lg-1 mb-sm-1 mb-lg-0">
						<div class="w-50 ml-5 pt-5 card ">
							<h3>联想E480C 轻薄系列</h3>
													
							<p class="h5 text-primary">￥5399.00</p>
							<a href="#" class="btn btn-primary rounded w-50">查看详情</a>
						</div>
						<img class="img3-float" src="http://101.96.128.94:9999/img/index/study_computer_img3.png" alt="">
					</div>
				</div>
				<!-- 第四个 -->
				<div class="col-lg-7 col-sm-12">
					<div class="row no-gutters">
						<!-- 右下部分1 -->
						<div class="col">
							<div class=" bottom-height mr-1">
								<img class="img4-1" src="http://101.96.128.94:9999/img/index/study_computer_img4.png" alt="">
								<div class="w-75 ml-4 pb-0 card align-items-center">
									<p class="text_small mb-0">华硕RX310 金属超极本</p>
														
									<p class="h5 text-primary pt-0">￥4966.00</p>
									<a href="#" class="btn btn-primary rounded w-75">查看详情</a>
								</div>
							</div>
						</div>
						<!-- 右下部分2 -->
						<div class="col">
							<div class=" bottom-height mr-1">
								<img class="img4-1" src="http://101.96.128.94:9999/img/index/study_computer_img5.png" alt="">
								<div class="w-75 ml-4 pb-0 card align-items-center">
									<p class="text_small mb-0">联想小新700 电竞版游戏本</p>
														
									<p class="h5 text-primary pt-0">￥6299.00</p>
									<a href="#" class="btn btn-primary rounded w-75">查看详情</a>
								</div>
							</div>
						</div>
						<!-- 右下部分3 -->
						<div class="col">
							<div class=" bottom-height " >
								<img class="img4-1" src="http://101.96.128.94:9999/img/index/study_computer_img3.png" alt="">
								<div class="w-75 ml-4 pb-0 card align-items-center">
									<p class="text_small mb-0 ">戴尔灵越燃7000 轻薄窄边</p>
														
									<p class="h5 text-primary pt-0">￥5199.00</p>
									<a href="#" class="btn btn-primary rounded w-75">查看详情</a>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			
			
			
			
			
		</div>
		</div>
		<!-- 脚部-->
		<div >
			<iframe src="footer.html" class="my_footer" scrolling="no"></iframe>
		</div>
		
		
	</body>
</html>